<script setup>
import { ref, reactive, onMounted, unref } from 'vue'
import CustomCard from './component/CustomCard.vue'
import PhoneModal from '@/components/PersonalInfo/PhoneModal.vue'
import MailModal from '@/components/PersonalInfo/MailModal.vue'
import ECardModal from '@/components/PersonalInfo/ECardModal.vue'
import Search from './component/Search.vue'
import logoImg from '@/assets/images/logo.png'
import { queryPolicyByPage } from '@/api/comprehensive'
import { queryUpdateTime } from '@/api/common'

import { Empty as AEmpty } from 'ant-design-vue'
import FooterView from '@/layout/component/footer.vue'
import { useChangeLanguage as changeLanguage } from '@/composables/language.js'
import { useRouter } from 'vue-router'
const router = useRouter()

const simpleImage = AEmpty.PRESENTED_IMAGE_SIMPLE
const value = ref('')
const isCardStyle = ref(true)
const spinning = ref(false)
const tabsList = [
  // {
  //   name: '客户信息',
  //   index: '1'
  // }
  // {
  //   name: '预授权信息',
  //   index: '2'
  // },
  // {
  //   name: '理赔信息',
  //   index: '3'
  // }
]
const active = ref('1')
const chooseTab = (index) => {
  if (active.value == index) return
  active.value = index
}
// 模糊搜索
const isFuzzySearch = ref(true)
const searchValue = ref('')
const onSearch = (val) => {
  isFuzzySearch.value = true
  searchValue.value = val
  indtData()
}
const exactSerachValue = ref({})
function handleSearch(formData) {
  isFuzzySearch.value = false
  exactSerachValue.value = {
    ...unref(formData)
  }
  indtData()
}
// 展开、收起 筛选
const arrowUp = ref(false)
function changeArrow() {
  arrowUp.value = !arrowUp.value
}

// card-list
const tableList = ref([])
const handlePageChange = (page, pageSize) => {
  pagination.current = page
  pagination.pageSize = pageSize
  getTableList()
}
const pagination = reactive({
  current: 1,
  pageSize: 8,
  defaultPageSize: 8,
  pageSizeOptions: ['8', '16', '40', '80'],
  size: 'large',
  total: 0
})
async function getTableList() {
  let res = null
  spinning.value = true
  const serchValue = unref(isFuzzySearch)
    ? { countSearch: unref(searchValue) }
    : {
        ...unref(exactSerachValue)
      }
  try {
    //desensitization 是否脱敏 02 否，01是
    const data = {
      desensitization: isEyeOpen.value ? '02' : '01',
      current: pagination.current,
      size: pagination.pageSize,
      model: {
        ...serchValue
      }
    }
    res = await queryPolicyByPage(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    spinning.value = false
  }
  if (res?.isSuccess) {
    const list = res?.data?.records || []
    pagination.total = Number(res.data.total)
    tableList.value = list
  }
}
// 数据脱敏
const isEyeOpen = ref(false)
function changeEye() {
  isEyeOpen.value = !isEyeOpen.value
  if (tableList.value.length) getTableList()
}
// 初始化数据
function indtData() {
  pagination.current = 1
  getTableList()
}
// 获取更新时间
const updateTime = ref('')
async function getTimeData() {
  let res = {}
  try {
    res = await queryUpdateTime()
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    updateTime.value = res.data
  }
}
onMounted(() => {
  getTimeData()
})

// phone modal
const phoneModalVisible = ref(false)
const phoneInfo = ref({})
function openPhoneModal(info) {
  phoneInfo.value = info
  phoneModalVisible.value = true
}
// mail modal
const mailModalVisible = ref(false)
const mailInfo = ref({})
function openMailModal(info) {
  mailInfo.value = info
  mailModalVisible.value = true
}
// ECard modal
const eCardVisible = ref(false)
const eCardInfo = ref({})
function openECardModal(info) {
  eCardInfo.value = info
  eCardVisible.value = true
}

function updateCustomInfoFun(info, yearInfo) {
  info.cardList = [yearInfo]
}
</script>

<template>
  <div class="home-layout">
    <header class="home-layout-header">
      <div class="header-top">
        <img :src="logoImg" />
        <div class="header-time">
          <span> {{ $t('home.updateTime') }}：{{ updateTime }} </span>
          <span class="line"></span>
          <svg-icon name="language-index" @click="changeLanguage" />
        </div>
      </div>
      <div class="input-search">
        <a-input-search
          v-model:value="value"
          :placeholder="$t('home.search.tip')"
          size="large"
          enter-button
          @search="onSearch"
        />
      </div>
      <div class="tabs">
        <div
          @click="chooseTab(item.index)"
          class="tabs-item"
          :class="{ 'tabs-active': item.index == active }"
          v-for="item in tabsList"
          :key="item.index"
        >
          {{ item.name }}
          <div v-if="item.index == active" class="white-triangle"></div>
        </div>
      </div>
    </header>
    <main class="home-layout-content">
      <main class="home-layout-main">
        <div class="main-header" :class="{ 'mg-bottom-20': arrowUp }">
          <div class="main-header-left">
            <span> {{ $t('home.total', { total: pagination.total }) }} </span>
            <svg-icon
              class="eyes"
              :name="isEyeOpen ? 'eye-open' : 'eye-close'"
              @click="changeEye"
            />
          </div>
          <div class="main-header-right">
            <span class="arrow" @click="changeArrow">
              {{ arrowUp ? $t('home.search.hideFilters') : $t('home.search.moreFilters') }}
            </span>
            <svg-icon
              @click="changeArrow"
              class="arrow-icon"
              :name="arrowUp ? 'arrow-up' : 'arrow-down'"
            />
            <!-- 注释切换 -->
            <!-- <div class="card-list">
              <div
                class="card-style"
                @click="isCardStyle = true"
                :class="{ 'card-style-choose': isCardStyle }"
              >
                <svg-icon
                  size="18px"
                  :name="isCardStyle ? 'card-style-choose' : 'card-style-no-choose'"
                />
              </div>
              <div
                class="list-style"
                @click="isCardStyle = false"
                :class="{ 'list-style-choose': !isCardStyle }"
              >
                <svg-icon
                  size="18px"
                  :name="isCardStyle ? 'list-style-no-choose' : 'list-style-choose'"
                />
              </div>
            </div> -->
          </div>
        </div>
        <Search v-show="arrowUp" @handleSearch="handleSearch"></Search>
        <a-spin :spinning="spinning">
          <template v-if="pagination.total > 0">
            <a-flex class="jus-center" wrap="wrap" gap="20">
              <CustomCard
                v-for="(info, index) in tableList"
                :key="index"
                :tableInfo="info"
                :info="info.cardList[0]"
                :isEyeOpen="isEyeOpen"
                @openPhoneModal="openPhoneModal"
                @openMailModal="openMailModal"
                @openECardModal="openECardModal"
                @updateCustomInfo="(yearInfo) => updateCustomInfoFun(info, yearInfo)"
              ></CustomCard>
            </a-flex>
            <a-pagination
              class="home-layout-pagination ant-pagination-common-ui"
              :showSizeChanger="true"
              v-model:current="pagination.current"
              v-model:page-size="pagination.pageSize"
              :pageSizeOptions="pagination.pageSizeOptions"
              :hideOnSinglePage="true"
              :total="pagination.total"
              size="large"
              @change="handlePageChange"
              :show-total="(total) => `${$t('global.pageTotal', { total: total })}`"
          /></template>

          <a-empty v-else class="empty-box" :image="simpleImage" />
        </a-spin>
      </main>
    </main>

    <FooterView></FooterView>
    <PhoneModal
      :showSearchPageLink="false"
      :phone-info="phoneInfo"
      v-if="phoneModalVisible"
      @updateVisible="(visible) => (phoneModalVisible = visible)"
      @openMailModal="openMailModal"
    ></PhoneModal>
    <MailModal
      v-if="mailModalVisible"
      :showSearchPageLink="false"
      :mail-info="mailInfo"
      @updateVisible="(visible) => (mailModalVisible = visible)"
    ></MailModal>
    <ECardModal
      @updateCardList="getTableList"
      :showSearchPageLink="false"
      :eCardInfo="eCardInfo"
      v-if="eCardVisible"
      @updateVisible="(visible) => (eCardVisible = visible)"
    ></ECardModal>
  </div>
</template>
<style lang="scss">
.home-layout {
  .ant-sleect-open .ant-select-selector:hover {
    border-color: #4d789c !important;
  }
  .home-layout-content {
    display: flex;
    justify-content: center;
    overflow: auto;
    height: calc(100vh - 276px);
  }
  .empty-box {
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .home-layout-header {
    height: 220px;
    background-image: url('@/assets/images/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    // padding-top: 120px;
    position: relative;
    display: flex;
    align-items: center;
    img {
      width: 208px;
      height: 39px;
      display: block;
    }
    .header-top {
      display: flex;
      width: 100%;
      padding: 0 30px;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 25px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      .header-time {
        display: flex;
        align-items: center;
      }
      .line {
        display: inline-block;
        width: 1px;
        height: 12px;
        background: #fff;
        margin: 0 20px;
      }
      .svg-icon {
        cursor: pointer;
      }
    }
    .input-search {
      width: 720px;
      height: 44px;
      margin: 0 auto;
      .ant-input-group-wrapper,
      .ant-input-wrapper,
      .ant-input,
      .ant-btn {
        height: 100%;
      }
      .ant-input {
        border-radius: 0;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        padding-left: 15px;
      }
      .ant-btn {
        border-radius: 0;
        border-start-end-radius: 8px !important;
        background-color: #5890a8;
        border-end-end-radius: 8px !important;
        &:hover {
          background-color: #97b7c5;
        }
      }
    }
    .tabs {
      position: absolute;
      bottom: 0px;
      z-index: 2;
      color: #fff;
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      cursor: pointer;
      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 400;
        font-size: 16px;
        .white-triangle {
          margin-top: 12px;
          width: 0;
          height: 0;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          border-bottom: 10px solid white;
        }
      }
      &-active {
        font-weight: bold;
      }
    }
  }
  .home-layout-main {
    padding: 40px 0 20px;
    width: 1540px;
    .main-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      .main-header-left {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
        color: $color-text-primary;
      }
      .main-header-right {
        display: flex;
        align-items: center;
        font-size: 15px;
        cursor: pointer;
        .arrow-icon {
          color: #999999;
          margin-left: 8px;
        }
        .arrow {
          font-weight: 500;
          color: $color-text-regular;
        }
        .card-list {
          display: flex;
          margin-left: 25px;
          .card-style {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: #ffffff;
            border-radius: 5px;
            color: #729db0;
          }
          .card-style-choose {
            background: #729db0;
            color: #fff;
          }
          .list-style {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: #ffffff;
            color: #999999;
            border-radius: 5px;
          }
          .list-style-choose {
            background: #729db0;
            color: #fff;
          }
        }
      }
      .eyes {
        margin-left: 10px;
        cursor: pointer;
      }
    }
    .mg-bottom-20 {
      margin-bottom: 20px;
    }
    .btn {
      width: 370px;
      height: 399px;
      background: #ffffff;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08);
      border-radius: 11px;
    }
  }
  @media screen and (max-width: 1661px) {
    .home-layout-main {
      width: 1150px;
      justify-content: center;
    }
  }
  @media screen and (max-width: 1300px) {
    .home-layout-main {
      width: 760px;
      justify-content: center;
    }
  }
  @media screen and (max-width: 900px) {
    .ant-flex-wrap-wrap {
      justify-content: center;
    }
    .home-layout-main {
      width: 661px;
      justify-content: center;
    }
  }
}

.home-layout-pagination {
  margin-top: 20px;
  text-align: right;
  .ant-pagination-options {
    .ant-select-dropdown {
      width: auto;
      max-width: 100px;
    }
  }
}
</style>
